.donate-page__title {
    @include display-2-semibold;
    margin-top: 0;
    @include md-up {
        @include display-1-semibold;
        margin-top: 0;
    }
}

.donate-page-intro {
    padding-top: 48px;
    padding-bottom: 48px;
    background-color: $gray-10;
}

.donate-page-intro__content {
    @include sm-only {
        margin-bottom: 40px;
    }
    .article-block__text {
        @include body-2-regular;
        margin-bottom: 24px;
    }
}

.donate-page__faq-link {
    @include body-3-medium;
    @include owid-link-90;
    display: inline-block;

    svg {
        margin-left: 6px;
        font-size: 10px;
    }
}

.donate-form {
    padding: 32px 40px;
    background-color: $white;

    fieldset {
        margin: 0 0 24px;
    }

    legend,
    .donation-name__label {
        margin-bottom: 8px;
        @include overline-black-caps;
        color: $blue-50;
    }

    .donation-options {
        display: flex;
        gap: 8px;

        @include sm-only {
            flex-wrap: wrap;
        }
    }

    .donation-options--grid {
        @include lg-down {
            display: grid;
            grid-gap: 8px;
            grid-template-columns: repeat(3, 1fr);
            & > * {
                margin-right: 0;
            }
        }
        @media (max-width: 480px) {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    .donation-options__button {
        flex: 1;
        padding: 8px 16px;
        @include body-3-medium;
        color: $blue-50;
        border: 1px solid $blue-20;
        border-radius: 0;
        background-color: $white;
        transition: background-color 0.1s;
        &:hover {
            cursor: pointer;
            background-color: $gray-10;
            border: 1px solid $gray-10;
        }
        &.active {
            color: $blue-90;
            background-color: $accent-pale-blue;
            border: 1px solid $accent-pale-blue;
        }
    }

    .donation-custom-amount {
        display: flex;
        align-items: center;
        padding: 8px 16px;
        border: 1px solid $blue-20;
        @include body-3-medium;
        color: $blue-50;
        &.active {
            color: $blue-90;
            background-color: $accent-pale-blue;
            border: 1px solid $accent-pale-blue;
        }
    }

    .donation-custom-amount__input {
        width: 100%;
        @include body-3-medium;
        color: inherit;
        border: none;
        background: transparent;
        outline: none;

        &::placeholder {
            color: $blue-40;
            transition: color 150ms linear;
        }

        &:focus::placeholder {
            color: $blue-20;
        }
    }

    .donation-checkbox {
        margin-bottom: 16px;
    }

    .donation-name__label {
        display: block;
    }

    .donation-name__input {
        width: 100%;
        padding: 8px 16px;
        border: 1px solid $blue-20;
        @include body-3-medium;
        color: $blue-90;
        &:focus {
            outline-color: $blue-50;
        }
    }

    .donation-checkbox__label {
        a {
            @include owid-link-90;
        }
    }

    .donation-payment {
        border-bottom: 1px solid $blue-20;
        margin-bottom: 32px;
        padding-bottom: 32px;
    }

    .donation-submit {
        display: inline-block;
        border: 1px solid $vermillion;
        padding: 12px 24px;
        background-color: $vermillion;
        color: white;
        @include body-2-semibold;
        cursor: pointer;

        &:hover {
            background-color: $accent-vermillion;

            .donation-submit__icon {
                transform: translateX(2px);
            }
        }

        &[disabled] {
            opacity: 0.5;
            cursor: default;
        }
    }

    .donation-submit--light {
        background-color: $white;
        color: $vermillion;

        &:hover {
            background-color: $white;
            color: $accent-vermillion;
        }
    }

    .donation-submit__icon {
        margin-left: 8px;
        font-size: 14px;
        transition: transform 150ms;
    }

    .donation-payment-benefits__item {
        list-style-position: outside;
        list-style-type: "✓ ";
        margin: 16px 0 0 16px;
        @include body-3-medium;
        svg {
            color: $blue-50;
        }
    }

    .donation-payment__or {
        @include body-2-semibold;
        color: $blue-60;
        margin-bottom: 16px;
    }

    .donation-note {
        @include body-3-medium;
        color: $blue-60;
        margin: 16px 0 0;

        a {
            @include owid-link-60;
        }
    }

    .error {
        @include body-3-medium;
        color: $error-text-color;
    }
}

.donate-page-faqs {
    padding-bottom: 80px;

    & > .article-block__text {
        @include body-2-regular;
        color: $blue-60;
    }

    h2.article-block__heading {
        margin-bottom: 16px;
    }

    p.article-block__text + h2.article-block__heading {
        margin-top: 24px; /* 40px - 16px (p's bottom margin) */
    }

    h1.article-block__heading + h2.article-block__heading {
        margin-top: 16px; /* 40px - 24px (h1's bottom margin) */
    }
}
